<template>
	<view class="content">
		<view class="userback">
			<img :src="baseUrl + head_img">
			<view class="userName">{{username}}</view>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item">
				<view class="content">软件版本</view>
				<view class="action">1.1.0</view>
			</view>
			<view class="cu-item">
				<view class="content">更新时间</view>
				<view class="action">2025-04-25</view>
			</view>
		</view>
		<view class="btn-row">
			<button v-if="!hasLogin" type="primary" class="primary" @tap="bindLogin">登录</button>
			<button v-if="hasLogin" type="primary" @tap="logout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState([ 'hasLogin','userInfo']),
		data() {
			return {
				username: '',
				head_img:'',
				baseUrl:getApp().globalData.baseUrl,
			}
		},
		onLoad() {
			console.log(this.userInfo)
			this.username = this.userInfo.username
			this.head_img = this.userInfo.head_img
		},
		methods: {
			...mapMutations(['logout']),
			bindLogin(){
				uni.reLaunch({
					url: '../login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.userback {
		height: 270px;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		text-align: center;
		}
		.userback img {
			margin: auto;
			border-radius: 65px;
			margin-top: 30%;
			width: 130px;
			height: 130px;
		}
	.userName {
		color: #111111;
	}

	uni-button[type=primary] {
		margin: 0 4%;
		background-image: linear-gradient(to top, #66b7f9, #1c82d4);
	}
	.cu-list {
		height: 195px;
		.cu-item {
			height: 50px;
			border-bottom: solid gray 1px;
			.content {
				float: left;
				padding: 28px 0 0 18px;
			}
			.action {
				float: right;
				padding: 28px 18px 0 0 ;
			}
		}
	}

</style>
